<template>
	<view class="project">
		<global-nav-bar @setHeight="setHeight" position="fixed" left-icon="back" title="审批信息" :fixed="false" backgroundColor="#2C2C2C"
				color="#fff"></global-nav-bar>
		<view class="projectBox"></view>
		<view class="content" :style="{paddingTop:mheight+'px'}">
			<view class="content-header">
				<view class="content-header-title">
					<view class="name">{{ info.name }}</view>
					<view class="location">
						<view>
							<image src="@/static/images/maintain/location.png" class="close"></image>
							定位
						</view>
					</view>
				</view>
				<view class="content-header-address">
					<view class="address_item new">{{ info.locationAddress }}</view>
				</view>
			</view>
			<view class="form-content">
				<view class="form-item address">
					<view class="left">地址</view>
					<view class="right">
						<view class="">{{ info.address }}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="left">类型</view>
					<view class="right">
						<view>{{ typeList[info.type] }}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="left">维保联系人</view>
					<view class="right">{{ info.contactsName }}</view>
				</view>
				<view class="form-item">
					<view class="left">电话</view>
					<view class="right">{{ info.phone }}</view>
				</view>
				<view class="form-item">
					<view class="left">实际梯数</view>
					<view class="right">{{ info.eleTotal }}</view>
				</view>
			
				<view class="form-item addNotice">
					<view class="addNotice-title">新增梯数的使用标志、维保标志</view>
					<view class="imgBox" v-if="imgBoxList.length"><image v-for="(item, index) in imgBoxList" 
					:key="index" :src="item" @click="handleImg(index)"></image>
					</view>
					<view v-else class="flex empty">
						暂无内容
					</view>
				</view>
				<view class="form-item addNotice supplement" >
					<view class="addNotice-title">补充信息</view>
					<view class="noticeContent" v-if="info.remark">{{info.remark}}</view>
					<view v-else class="flex empty">暂无内容</view>
				</view>
			</view>
		</view>
		<view class="save">
			<view class="disable">{{ ['', '待审批', '已通过', '未通过'][status] }}</view>
		</view>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import { approveDetail } from '@/apis/approve.js';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
export default {
	components: {
		GlobalNavBar
	},
	data() {
		return {
			mheight: 0,
			info: {},
			total: 0,
			typeList: ['', '小区', '别墅', '商超', '酒店/民宿', '学校', '医院', '工厂', '其他', '办公楼', '政府单位', '公共设施', '出租房'],
			imgBoxList: [],
			status: 0,
			// 审批工单id
			businessApproveId: '',
		};
	},
	onLoad(opt) {
		// console.log(opt, 'opt的值')
		this.businessApproveId = opt.id;
		this.getApproveDetail();
	},
	created() {},
	onShow() {},
	computed: {
		
	},
	methods: {
		setHeight(n) {
			this.mheight = n; 
		},
		// 获取已提交项目信息
		getApproveDetail() {
			uni.showLoading({
				title: '加载中'
			});
			approveDetail({ businessApproveId: this.businessApproveId }).then(res => {
				if (res) { 
					this.info = res.data.buildingSubmitVO;
					this.status = res.data.approveStatus;
					this.imgBoxList = this.info.imgUrl;
					uni.hideLoading();
				}
			});
		},
		
		previewImage(i, list) {
			// 预览图片
			this.$previewMedia({
				current: i,
				sources: list
			});
		},
		// 操作图片
		handleImg(index) {
			let itemList = ['查看大图'];
			uni.showActionSheet({
				itemList: itemList,
				success: res => { 
					if (res.tapIndex == 0) {
						this.previewImage(index, this.imgBoxList);
					}
				}
			});
		},
		
	}
};
</script>
<style></style>
<style lang="scss" scoped>
page {
	height: 100%;
	background-color: #f3f6f8;
}

uni-picker .uni-picker-action.uni-picker-action-confirm {
	color: #57dbd0 !important;
}

.project {
	font-size: 28rpx;
	background-color: #f3f6f8;
	min-height: 100vh;
	.projectBox{
		position: fixed;
		z-index: 300;
		width: 100%;
	}
	.empty{
		color: #ccc;
		height: 200rpx;
	}

	.content {
		display: flex;
		justify-content: center;
		// height: 1082rpx;
		flex-direction: column;
		align-items: center;
		padding-bottom: 100rpx;
		// margin-bottom: 100rpx;

		&-header {
			width: 710rpx;
			.location {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				font-size: 24rpx;
				color: #666;
				font-weight: 400;
				flex: 1;
				justify-content: center;
				view{
					display: flex; 
					align-items: center;
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
				
			}

			&-title {
				// width: 414rpx;
				// height: 58rpx;
				font-size: 42rpx;
				font-family: PingFangSC, PingFangSC-Semibold;
				font-weight: 600;
				text-align: center;
				color: #333333;
				text-align: left;
				margin: 32rpx 0 0 0;
				display: flex;
				justify-content: space-between;
				.name {
					width: 550rpx;
				}
			}

			&-address {
				display: flex;
				// justify-content: flex-end;
				justify-content: space-between;
				.address_item {
					display: flex;
					flex: 1;
				}
				.old {
					color: #999999;
					display: flex;
				}
				.new {
					color: #ff7505;
					display: flex;
					justify-content: flex-end;
					text-align: right;
					flex: 1;
				}
			
			}
		}

		.title {
			display: flex;
			height: 110rpx;

			view {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
			}
		}

		.form-content {
			width: 710rpx;
			box-sizing: border-box;
			background: #fff;
			margin: 0rpx 0 20rpx 0;
			padding: 0 20rpx;
			border-radius: 8rpx;
			margin-top: 28rpx;
			.address {
				textarea {
					min-height: 60rpx;
					width: 100%;
					height: 100rpx;
					align-items: center;
					display: flex;
					align-items: center;
					text-align: right;
				}
			}
			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				// padding: 40rpx 0rpx;

				border-bottom: 2rpx solid #e9e9e9;

				.unit {
					margin-left: 4rpx;
				}

				.left {
					height: 118rpx;
					font-size: 28rpx;
					color: #999;
					width: 170rpx;
					display: flex;
					align-items: center;
					text {
						color: red;
						padding: 5rpx;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}
				.right {
					min-height: 118rpx;
					display: flex;
					flex: 1;
					align-items: center;
					justify-content: flex-end;

					view:nth-child(1) {
						display: flex;
						height: 100%;
						align-items: center;
						width: 100%;
						justify-content: flex-end;
						text-align: right;
					}

					input {
						text-align: right;
						width: 100%;
					}

					text {
						color: #999;
					}
				}
				.count {
					width: 218rpx !important;
					display: flex;
					height: 118rpx;
					align-items: center;
					justify-content: flex-end;
					input {
						display: flex;
						flex: 1;
						text-align: center;
						box-sizing: border-box;
						height: 60rpx;
						border-top: 2rpx solid #d3dbe1;
						border-bottom: 2rpx solid #d3dbe1;
					}
					view {
						display: flex;
						width: 60rpx;
						height: 60rpx;
						color: #828e96;
						align-items: center;
						box-sizing: border-box;
						justify-content: center;
						background: #f3f6f8;
						border: 2rpx solid #d3dbe1;
						border-radius: 4rpx 0rpx 0rpx 4rpx;
					}
				}
			}
			.supplement{
				border-bottom: none;
				padding-bottom: 30rpx;
			}
			.addNotice {
				display: flex;
				flex-direction: column;
				.noticeContent{
					width: 100%;
					display: flex;
				}
				.addNotice-title {
					width: 100%;
					align-items: flex-start;
					padding: 20rpx 0 28rpx 0;
					color: #999999;
				}
				.border {
					border: 2rpx solid #e9e9e9;
				}

				.imgBox {
					padding-bottom: 40rpx;
					margin: 0 20rpx;
					width: 100%;
					image {
						width: 112rpx;
						height: 112rpx;
						// border: 1rpx solid #ccc;
						margin-right: 18rpx;
					}
					textarea {
						width: 630rpx;
						margin: 20rpx;
					}
					.lenthTips {
						margin-right: 20rpx;
						color: #ccc;
						// width: 100%;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	.save {
		display: flex;
		justify-content: center;
		padding: 14rpx 0;
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 50;

		view {
			width: 710rpx;
			background: #0091ff;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 8rpx;
			color: #fff;
		}
		.disable {
			background-color: #efefef;
			color: #cccccc;
		}
	}
}
</style>
